import Icon from '@/components/Icon'
import React, {useEffect,useState} from 'react'
import { Input } from 'antd-mobile'
import {fetchItems} from '@a/index'
import {useNavigate} from 'umi'
import './assets/style.scss'
export default function index() {
const [value, setValue] = useState('')
const [items, setItems] = useState([])
const navigate = useNavigate()
  //商品名称模糊搜索 nameLike
const fetchItemsed = (params ={}) => {
  fetchItems(params).then(res => {
    console.log(res);
    if (res.data.code === 0) {
      setItems(res.data.data.result)
    }
    if (res.data.code === 700) {
      setItems([])
    }
  })
}

   //商品名称模糊搜索 nameLike



   //添加购物车
 const addShopping = (id:number) => {

 }
  //添加购物车
  return (
    <div className="search_home">
       <div className='search_div'>
<Icon name='&#xe60b;' size={25} onClick={() => {
navigate(-1)
}}/>
<div className='searchIcon'>
<Icon name="&#xe61c;" size={20}/>
<Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
</div>

<button 
onClick={
  () => {
    fetchItemsed({nameLike:value })
  }
}>搜索</button>
    </div>
      {/* 商品列表 */}
      {
            items.length ===0 
            &&
            <>
            <h2 style={{textAlign:'center'}}>
              没有你所搜索的内容
            </h2>
            </>
          }
          {items.map(item => {
            return (
              <div className='itemLists_nav' key={item.id} 
              onClick = {
                () => {
                  navigate('/detail', {
                    state: {
                      id: item.id
                    }
                  })
                }
              }>
              <img src={item.pic} alt="" />
              <div className='priceNav'>
<p>{item.name}</p>
<div className='icon_price'>
<span>${item.minPrice}</span>
<Icon name = '&#xe61b;' 
          size={25} 
          color='red' 
          stop = {true}
          onClick={
            () => {
              // 添加购物车
              addShopping(item.id)
            }
           
          }/>
</div>
              </div>
            </div>
            )
           
          })}
              
          {/* 商品列表 */}
    </div>
   
  )
}
